<template>
  <div class="header-info">
    <div class="list-item-setting">
      <div class="title-info">
        <el-divider content-position="left">区域设置</el-divider>
      </div>
      <el-form-item label="区域高度">
        <el-input-number
            :min="0"
            size="small"
            v-model="optionsInfo.height"
        />
      </el-form-item>

      <el-form-item label="选择素材">
        <el-button type="primary" size="small" @click="handleSelect('formCarouselInfo',(optionsInfo.carouselInfo))">
          选择素材
        </el-button>
      </el-form-item>

      <el-form-item label="图片是否铺满">
        <el-switch v-model="optionsInfo.fill"/>
      </el-form-item>

      <el-form-item label="轮播图时间(单)" class="column-area">
        <el-input-number :min="10" v-model="optionsInfo.swiperTime"/>
      </el-form-item>

      <!--已经上传的资源-->
      <carouselEditor
          :delayState="false"
          :designer="designer"
          resourceType="carouselInfo"
          :option-model="optionModel"
          :selected-widget="selectedWidget"
      />
    </div>


    <!--轮播图弹层-->
    <DrawerSource
        @handleSure="handleSure"
        @handleCancel="handleCancel"
        :info="formCarouselInfo.info"
        :visible="formCarouselInfo.visible"
    />

  </div>
</template>

<script>
import Draggable from "vuedraggable"
import constantDic from "@/utils/vue-i18n/lang/zh-CN";
import updatePicture from "@c/public/layer/template/updatePicture/index.vue";
import DrawerSource from "@c/public/layer/template/drawerSource";
import carouselEditor
  from "@sc/templateDetails/modules/homeRight/property-editor/module/scene-edit/basicInfo/carousel-editor.vue";
import * as types from "@c/public/form-designer/devType/datas-types";

export default {
  name: "infoPublicPictureConfig-editor",

  componentName: "infoPublicPictureConfig-editor",

  mixins: [],

  components: {
    carouselEditor,
    Draggable,
    updatePicture,
    DrawerSource,
  },

  props: {
    designer: Object,
    optionModel: Object,
    selectedWidget: Object,
  },

  inject: ['serverFieldList', 'getDesignerConfig'],

  data() {
    return {
      radio: 1,
      screenType: '',
      optionsInfo: Object(),
      constantDic: constantDic,
      formEditorInfo: {
        info: Object(),
        visible: false,
      },
      formVideoInfo: {
        info: Object(),
        visible: false,
      },
      // 轮播图
      formCarouselInfo: {
        info: Object(),
        visible: false,
      },
      predefineColors: types['predefineColors'],
    }
  },

  methods: {
    // 选择文本内容&视频
    handleSelect(val, content) {
      let params = Object();
      switch (val) {
        case 'formEditorInfo':
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'content');
          // 旧的数据
          Reflect.set(params, 'content', content || '')
          Reflect.set((this.formEditorInfo), 'visible', true);
          Reflect.set((this.formEditorInfo), 'info', params);
          break
        case 'formVideoInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', 'video');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'video');
          Reflect.set(params, 'multiple', true);
          // 旧的数据
          Reflect.set(params,'content',content || [])
          Reflect.set((this.formVideoInfo), 'visible', true);
          Reflect.set((this.formVideoInfo), 'info', params);
          break
        case 'formCarouselInfo':
          // 查找资源库对应的资源
          Reflect.set(params, 'type', '');
          // 修改对应的字段
          Reflect.set(params, 'updataType', 'carouselInfo');
          // 旧的数据
          Reflect.set(params,'content',content || []);
          // 是否支持多图片
          Reflect.set(params, 'multiple', true);
          Reflect.set((this.formCarouselInfo), 'visible', true);
          Reflect.set((this.formCarouselInfo), 'info', params);
          break
      }
    },

    // 取消弹层
    handleCancel() {
      Reflect.set((this.formEditorInfo), 'visible', false);
      Reflect.set((this.formVideoInfo), 'visible', false);
      Reflect.set((this.formCarouselInfo), 'visible', false);
    },

    // 更新就的数据
    handleSure(valInfo) {
      const self = this;
      let {key, val} = valInfo;
      switch (key) {
        case 'content':
        case 'carouselInfo':
          Reflect.set((self.optionsInfo), key, val);
          break;
        default:
          const updatedArray = self.$lodash.map(val, function(object) {
            return self.$lodash.assign({}, object, { delay: 5 });
          });
          let info = [...updatedArray];
          Reflect.set((self.optionsInfo), key, []);
          Reflect.set((self.optionsInfo), key, info);
      }
    },

    handleDragEnd() {
    },

    handleChangeDelay(event,key){
      console.log(event)
      console.log(key)
    },
    // 删除上传的资源
    handleDelete(index, type) {
      let {carouselInfo, video} = this.optionsInfo;
      switch (type) {
        case 'carouselInfo':
          carouselInfo.splice(index, 1);
          break
        case 'video':
          video.splice(index, 1);
          break
      }
    }
  },

  watch: {
    // 组件的所有信息
    optionModel: {
      handler: function (val) {
        this.optionsInfo = val[val.config];
      },
      deep: true,
      immediate: true
    }
  }
}
</script>


<style lang="scss" scoped>
.process-step {
  display: flex;
  flex-direction: column;

  ::v-deep .el-form-item__label {
    display: none;
    width: 100% !important;
  }

  ::v-deep .el-form-item__content {
    margin-left: 0 !important;;
  }

  .header-wrap {
    display: flex;
    justify-content: space-between;
    margin-bottom: 14px;
    align-self: center;
    align-items: center;

    .title {
      @include fontWeight();
      font-size: 20px;
    }

    .el-button {
      padding: 8px 22px
    }
  }

}

.number-area,
.resource-area,
.tips-area {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: 14px;
  align-self: center;
  align-items: center;

  :deep(.el-form-item__label) {
    width: 100% !important;
    @include fontWeight();
  }

  :deep(.el-form-item__content) {
    width: 100% !important;
    margin-left: 0 !important;
  }

  :deep(.ql-toolbar) {
    padding: 0;
    border-bottom: none;

    .ql-formats {
      display: none;
    }
  }

  :deep(.ql-container) {
    min-height: 180px;

    .ql-editor p {
      line-height: 28px;
    }
  }
}

.picture-resource {
  .item-area {
    min-width: inherit;
    min-height: inherit;

    .name {
      border: none;
      display: flex;
      flex-direction: column;
      min-width: calc(100% - 64px);
      overflow: hidden;
      margin-right: 10px;

      .el-button {
        border: none;
        background: transparent;
        @include singleEllipsis(100%);
        text-align: left;
        padding: 9px 0
      }
    }

    .icon {
      min-width: 48px;
      height: auto;
      border: none;
      font-size: 18px;
      display: flex;
      align-items: center;
      text-align: center;
      justify-content: center;
      i{
        cursor: pointer;
        &:first-child{
          padding-right: 6px;
        }
        &:hover{
          color: dodgerblue;
        }
      }
    }
  }
}

.column-area {
  display: flex;
  flex-direction: column;

  :deep(.el-form-item__label) {
    width: 100% !important;
    margin-bottom: 10px;
  }

  :deep(.el-form-item__content) {
    width: 100%;
    margin-left: 0 !important;

    .el-radio-group {
      width: 100%;
      display: flex;
      flex-direction: column;

      .el-radio {
        margin-bottom: 10px;
      }
    }

    .el-checkbox-group{
      display: flex;
      flex-direction: column;
    }

  }

}

</style>